import React, { Component } from 'react'
import { Card, List } from 'antd'
import LinkButton from '../../components/link-button'
import { BASE_IMG_URL } from '../../utils/constants'
import { reqCategory } from '../../api'

import { ArrowLeftOutlined } from "@ant-design/icons"

const Item = List.Item

export default class detail extends Component {

  state = {
    cName1: '', // 一级分类名称
    cname2: '', // 二级分类名称
  }

  async componentDidMount() {
    // 得到当前商品的分类id
    const { pCategoryId, categoryId } = this.props.location.state.product
    if (pCategoryId === '0') { // 一级分类下的商品
      const result = await reqCategory(categoryId)
      const cName1 = result.data.data.name
      this.setState({ cName1 })
    } else { // 二级分类下的商品
      // 通过多个await方式发送请求
      // const result1 = await reqCategory(pCategoryId)
      // const result2 = await reqCategory(categoryId)
      // const cName1 = result1.data.data.name
      // const cName2 = result2.data.data.name

      // 一次性发送多个请求，只有都成功才处理
      const results = await Promise.all([reqCategory(pCategoryId), reqCategory(categoryId)])
      const cName1 = results[0].data.data.name
      const cName2 = results[1].data.data.name
      this.setState({ cName1, cName2 })
    }
  }

  render() {

    const { name, desc, price, detail, imgs } = this.props.location.state.product
    const { cName1, cName2 } = this.state

    const title = (
      <span>
        <LinkButton>
          <ArrowLeftOutlined style={{ color: 'green', marginRight: 10, fontSize: 20 }}
            onClick={() => this.props.history.goBack()} />
        </LinkButton>
        <span>商品详情</span>
      </span>
    )
    return (
      <Card className="product-detail" title={title}>
        <List grid={{ gutter: 2 }}>
          <Item>
            <span className="left">商品名称：</span>
            <span>{name}</span>
          </Item>
          <Item>
            <span className="left">商品描述：</span>
            <span>{desc}</span>
          </Item>
          <Item>
            <span className="left">商品价格：</span>
            <span>{price}</span>
          </Item>
          <Item>
            <span className="left">所属分类：</span>
            <span>{cName1} {cName2 ? '-->' + cName2 : ''}</span>
          </Item>
          <Item>
            <span className="left">商品图片</span>
            <span>
              {
                imgs.map(img => (
                  <img key={img} src={BASE_IMG_URL + img} className="product-img" />
                ))
              }
            </span>
          </Item>
          <Item>
            <span className="left">商品详情：</span>
            <span dangerouslySetInnerHTML={{ __html: detail }}>
            </span>
          </Item>
        </List>
      </Card>
    )
  }
}
